<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-02-22 14:48:29
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-04-25 17:21:28
-->
<template>
  <div>
    <el-dialog
      title="新建回款"
      :visible.sync="dialog.XshkDialog"
      width="50%"
      @close="XshkClose"
    >
      <el-form
        :model="planForm"
        ref="planForm"
        :rules="xshkRules"
        label-position="top"
        v-if="dialog.XshkDialog"
      >
        <div class="basics">基础信息</div>
        <div class="formItem">
          <el-form-item label="回款编号" prop="code" v-if="numShow">
            <el-input
              v-model="planForm.code"
              placeholder="请输入回款编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户名称" prop="customer">
            <el-input
              v-model="planForm.customer"
              placeholder="+ 添加"
              @focus="customerAdd"
              :disabled="payDisabled"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同名称" prop="contract">
            <el-input
              v-model="planForm.contract"
              placeholder="+ 添加"
              @focus="contractAdd"
              :disabled="payShow"
            ></el-input>
          </el-form-item>
          <el-form-item label="期数">
            <el-select
              v-model="planForm.issue"
              @change="IssueChange"
              placeholder="请选择回款期数"
            >
              <el-option
                v-for="item in issueOptions"
                :key="item.issue"
                :label="item.issue"
                :value="item.issue"
                :disabled="payDisabled"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="回款日期">
            <el-date-picker
              v-model="planForm.date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="回款金额" prop="amount">
            <el-input
              v-model="planForm.amount"
              placeholder="请输入回款金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="回款方式" prop="type">
            <el-select v-model="planForm.type" placeholder="请选择选择回款方式">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              rows="3"
              v-model="planForm.remark"
              style="width: 330px"
            ></el-input>
          </el-form-item>
        </div>
        <div class="basics">基础信息</div>
        <el-form-item label="审核信息" prop="examine">
          <div class="approve">
            <template v-for="(item, index) in xshkList">
              <div :key="index" class="examine">
                <div class="examine-qd">
                  <div class="circle-img">
                    <el-tooltip
                      :content="item.nickName"
                      placement="top"
                      effect="dark"
                    >
                      <img :src="item.avatar" alt="" />
                    </el-tooltip>
                  </div>
                  <div>{{ item.nickName }}</div>
                  <div class="circle-series">第{{ index + 1 }}级</div>
                </div>
              </div>
            </template>
            <div class="examine">
              <div class="examine-qd">
                <div class="circle" @click="onAdd">
                  <i class="el-icon-plus circleIcon"></i>
                </div>
                <div>选择人员</div>
                <div class="circle-series">第{{ xshkList.length + 1 }}级</div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="mainCustom">
        <div
          v-for="(item, index) in formList"
          :key="index"
          :class="item.type !== 18 ? 'mainCustomFive' : 'mainCustomOne'"
        >
          <div v-show="item.isHidden">
            <main-content
              :formList="item"
              class="main-con"
              ref="mainContent"
            ></main-content>
          </div>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialog.XshkDialog = false">取消</el-button>
        <el-button type="primary" @click="submit">提交审核</el-button>
      </span>
    </el-dialog>
    <el-dialog title="审核人" :visible.sync="dialog.examineShow" width="30%">
      <el-table :data="examineData" @selection-change="handleSelectionChange">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="nickName" label="审核人名称"> </el-table-column>
      </el-table>

      <span slot="footer">
        <el-button @click="dialog.examineShow = false">取消</el-button>
        <el-button type="primary" @click="examineSubmit" :disabled="disabled">
          确定
        </el-button>
      </span>
    </el-dialog>
    <customer :dialog="dialog" v-if="dialog.customerShowEject"></customer>
    <contract :dialog="dialog" v-if="dialog.contractShowEject"></contract>
  </div>
</template>

<script>
import { getNoRepeatPersonLiable } from "@/api/CRM/comtact";
import {
  getIssues,
  XshkInsert,
  updateXshk,
  getInfo,
} from "../../../../api/CRM/xshk";
import customer from "../CRM/customer.vue";
import Contract from "../CRM/contract.vue";
import { getModuleByName, showCustomField } from "@/api/currency.js";
import mainContent from "@/components/mainContent/index.vue";
import { showCodeInput } from "@/api/sys";
export default {
  components: { customer, Contract, mainContent },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    payDisabled: {
      type: Boolean,
      default: false,
    },
    payShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const validateExamine = (rule, value, callback) => {
      if (this.planForm.auditUserIds.length == 0) {
        callback(new Error("请选择审核人"));
      } else {
        callback();
      }
    };
    return {
      numShow: true,
      formList: [],
      disabled: false,
      multipleSelection: [],
      examineData: [],
      xshkList: [],
      options: [],
      typeOptions: [
        {
          label: "微信支付",
          value: 1,
        },
        { label: "支付宝支付", value: 2 },
        { label: "网上转账", value: 3 },
        { label: "其他", value: 4 },
      ],
      xshkRules: {
        contract: [
          { required: true, message: "请输入合同名称", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入合同编号", trigger: "blur" }],
        customer: [{ required: true, message: "请输入客户名称" }],
        amount: [
          { required: true, message: "请输入合同金额", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择回款方式", trigger: "change" },
        ],
        examine: [
          {
            required: true,
            message: "请选择审核人",
            validator: validateExamine,
          },
        ],
      },
      issueOptions: [],
      planForm: {
        code: "",
        customerId: "",
        customer: "",
        contractId: "",
        contract: "",
        issue: "",
        date: "",
        type: "",
        remark: "",
        amount: "",
        auditUserIds: [],
      },
    };
  },
  watch: {
    "planForm.contractId": {
      deep: true,
      handler(val) {
        if (val !== "" && this.payDisabled == false) {
          this.getIssues();
          this.planForm.issue = "";
        }
      },
    },
  },
  created() {
    this.getModule();
    this.showCodeInput();
  },
  methods: {
    // 是否展示回款编号
    showCodeInput() {
      showCodeInput({
        module: 2,
      }).then((res) => {
        this.numShow = res.data;
      });
    },
    // 根据期数获取详细数据
    IssueChange(val) {
      getInfo({
        customerId: this.planForm.customerId,
        contractId: this.planForm.contractId,
        issue: val,
      }).then((res) => {
        this.planForm.date = res.data.date;
        this.planForm.amount = res.data.planAmount;
        this.planForm.type = res.data.type;
      });
    },
    // 获取模块Id
    getModule() {
      getModuleByName({
        name: "回款",
      }).then((res) => {
        showCustomField({
          module: res.data,
          id: this.planForm.id || null,
        }).then((res) => {
          console.log(res);
          res.data.map((item) => {
            if (item.type == 3 && item.choiceList == null) {
              item.choiceList = [];
              console.log(item);
            }
          });
          this.formList = res.data;
          console.log(this.formList);
        });
      });
    },
    // 获取期数
    getIssues() {
      getIssues({
        customerId: this.planForm.customerId,
        contractId: this.planForm.contractId,
      }).then((res) => {
        this.issueOptions = res.data;
      });
    },
    // 合同添加
    contractAdd() {
      if (this.planForm.customerId == "") {
        this.$message.info("请先选择客户");
      } else {
        this.dialog.contractShowEject = true;
        this.$nextTick(function () {
          this.dialog.contractShow = true;
        });
      }
    },
    // 客户添加
    customerAdd() {
      this.dialog.customerShowEject = true;
      this.$nextTick(function () {
        this.dialog.customerShow = true;
      });
    },
    // 表格前多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 1) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    // 获取审核
    getNoRepeatPersonLiable() {
      getNoRepeatPersonLiable(this.planForm.auditUserIds).then((res) => {
        this.examineData = res.data;
      });
    },
    // 审核人确定
    examineSubmit() {
      this.planForm.auditUserIds.push(this.multipleSelection[0].userId);
      this.xshkList.push(this.multipleSelection[0]);
      this.dialog.examineShow = false;
      this.multipleSelection = [];
    },
    // 添加审核人员
    onAdd() {
      this.dialog.examineShow = true;
      this.getNoRepeatPersonLiable();
    },
    // 关闭新建回款
    XshkClose() {
      this.dialog.XshkDialogEject = false;
    },
    // 提交审核
    submit() {
      this.planForm.customField = JSON.stringify(this.formList);
      this.$refs["planForm"].validate((valid) => {
        if (!valid) return;
        if (this.planForm.id == undefined) {
          XshkInsert(this.planForm).then((res) => {
            this.$message.success(res.msg);
            this.dialog.XshkDialog = false;
            this.$parent.zxChi();
          });
        } else {
          updateXshk(this.planForm).then((res) => {
            this.$message.success(res.msg);
            this.dialog.XshkDialog = false;
            this.$parent.getList();
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  .formItem {
    display: flex;
    flex-wrap: wrap;
    /deep/.el-form-item {
      width: 48%;
      .el-input__inner {
        width: 330px;
      }
    }
  }
}
.basics {
  position: relative;
  font-size: 14px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.approve {
  display: flex;
  flex-wrap: wrap;
}
.examine {
  display: flex;
  margin-right: 20px;
  padding: 0 5px;
  .examine-qd {
    display: flex;
    flex-direction: column;
    align-items: center;
    .circle-img {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 40px;
      }
    }
    .circle {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background-color: #1267fa;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .circleIcon {
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
.mainCustom {
  display: flex;
  flex-wrap: wrap;
  .mainCustomFive {
    width: 50%;
  }
  .mainCustomOne {
    width: 100%;
  }
}
/deep/ .el-dialog__body {
  height: 720px;
  overflow: auto;
}
</style>